<template>
	<view class="logistics-slot">
		<view class="user-content">
			<view class="clickable receiver" @click="copy(`${receiverName} ${receiverPhone} ${receiverAddress}`)">
				<text>{{ receiverName }} {{ receiverPhone || '--' }}</text>
				<text class="address">{{ receiverAddress }}</text>
			</view>

			<!-- 下单次数 -->
			<u-tag
				@click="$emit('payHistory', payload)"
				:text="`平台下单${orderCount}次  复购下单${orderCount}次`"
				type="warning"
				plain
				size="mini"
				style="color: #ef5c5c; margin-top: 8rpx"
			/>
		</view>
		<view v-if="isMultiPackage" class="multi-package">多包裹订单：共计 {{ childrens?.length || 0 }} 个包裹 {{ goodsTotal }} 件商品</view>
	</view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{
	receiverName: string;
	receiverPhone?: string;
	receiverAddress: string;
	isMultiPackage: string;
	childrens?: Array<any>;
	orderCount?: number;
	productCollection: any[];
	payload: any; // 用于传递完整 row 给事件
}>();

defineEmits(['payHistory']);

const copy = (text: string) => {
	uni.setClipboardData({
		data: text,
		success: () => uni.showToast({ title: '已复制', icon: 'none' })
	});
};

const goodsTotal = computed(() => {
	// 判断是否是多包裹
	if (props.isMultiPackage == '1') {
		return props.childrens.reduce((sum, item) => sum + item.productCollection.reduce((s, i) => s + (parseInt(i.num) || 0), 0) || 0, 0);
	}

	return props.productCollection.reduce((sum, item) => sum + (parseInt(item.num) || 0), 0);
});
</script>

<style lang="scss" scoped>
.logistics-slot {
	margin: 8rpx 0;

	.user-content {
		margin: 8rpx 0;
	}
}

.receiver {
	margin-bottom: 8rpx;
}
.address {
	display: block;
	font-size: 26rpx;
	color: #666;
	margin-top: 4rpx;
}
.multi-package {
	color: #999;
	font-size: 26rpx;
}
</style>
